<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>灵活的背景定位</title>
        <style>
            div {
                max-width: 10em;
                min-height: 5em;
                color: white;
                word-wrap: break-word;
                font: 100%/1 sans-serif;
                padding: 10px;
            }

            .bottom-right {
                /* bottom right 回退方案, 老版本浏览器不支持 bottom 10px 格式 */
                background: #5588aa url("code-pirate.svg") no-repeat bottom right;
                background-position: right 20px bottom 10px;
            }

            hr.divider {
                margin: 8px 0;
            }

            .calc {
                /* bottom right 回退方案, 老版本浏览器不支持 bottom 10px 格式 */
                background: #5588aa url("code-pirate.svg") no-repeat bottom right;
                background-position: calc(100% - 20px) calc(100% - 10px);
            }
        </style>
    </head>
    <body>
        <div class="bottom-right">Code Pirate</div>
        <hr class="divider">
        <div class="calc">Code Pirate</div>
    </body>
</html>